<template>
  <div class="machine">
    <!--  标题区域  -->
    <div class="flex flex-a-c">
      <div class="machine-title colorin">机床信息</div>
      <a-button v-if="show" type="primary" icon="check-circle" @click="handleEdit">完成</a-button>
      <a-button v-else type="primary" icon="edit" @click="handleEdit">编辑</a-button>
    </div>
    <br />
    <!--  内容区域  -->
    <a-form-model :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row :gutter="24">
        <a-col :xl="18" :xxl="18">
          <!--   line-1  -->
          <a-row :gutter="24">
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="SN号">
                <span class="colorin" v-if="!show">{{ model.macSN || '' }}</span>
                <a-input v-else v-model="model.macSN" :disabled="true" placeholder="请输入SN号" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="上网设备IMEI">
                <span class="colorin" v-if="!show">{{ model.macImei || '' }}</span>
                <a-input v-else v-model="model.macImei" placeholder="请输入上网设备IMEI" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="iccid">
                <span class="colorin" v-if="!show">{{ model.cid || '' }}</span>
                <a-input v-else v-model="model.cid" placeholder="请输入iccid" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <!--   line-2  -->
          <a-row :gutter="24">
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="设备规格">
                <span class="colorin" v-if="!show">{{ model.macNorm || '' }}</span>
                <a-input v-else v-model="model.macNorm" placeholder="请输入设备规格" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="地理位置">
                <span class="colorin" v-if="!show">{{ model.location || '' }}</span>
                <a-input v-else v-model="model.location" placeholder="请输入地理位置" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="设备编号">
                <span class="colorin" v-if="!show">{{ model.macNumb || '' }}</span>
                <a-input v-else v-model="model.macNumb" placeholder="请输入设备编号" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <!--   line-3  -->
          <a-row :gutter="24">
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="联网方式">
                <span class="colorin" v-if="!show">{{ model.netWorkingMode || '' }}</span>
                <a-select
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-else
                  :default-value="model.netWorkingMode"
                  style="width:100%"
                  v-model="model.netWorkingMode"
                  placeholder="请选择联网方式"
                >
                  <a-select-option :value="item" v-for="(item, index) in netTypeArray" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="设备类型">
                <span class="colorin" v-if="!show">{{ model.macName || '' }}</span>
                <a-select
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-if="show"
                  :default-value="macName[0]"
                  v-model="macName[0]"
                  @change="handleChangeMacNameOne"
                  style="width: 50%"
                >
                  <a-select-option :value="item" v-for="item in equipmentTypeList" :key="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
                <a-select
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-if="show"
                  v-model="macName[1]"
                  :default-value="macName[1]"
                  @change="handleChangeMacNameTwo"
                  style="width: 50%"
                >
                  <a-select-option :value="item" v-for="item in equipmentType[macNameIndex]" :key="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="刀库类型">
                <span class="colorin" v-if="!show">{{ model.toolChargeType || '' }}</span>
                <a-select
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-else
                  v-model="model.toolChargeType"
                  :default-value="model.netWorkingMode"
                  style="width: 100%"
                >
                  <a-select-option :value="item" v-for="item in toolData" :key="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!--   line-4  -->
          <a-row :gutter="36">
            <a-col :xl="8" :xxl="8">
              <a-form-model-item label="设备型号">
                <span class="colorin" v-if="!show">{{ model.macType || '' }}</span>
                <a-input v-else v-model="model.macType" placeholder="请输入设备型号" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="15" :xxl="15">
              <a-form-model-item
                :labelCol="{
                  xl: { span: 3 },
                  xxl: { span: 3 },
                }"
                :wrapperCol="{
                  xl: { span: 21 },
                  xxl: { span: 21 },
                }"
                label="机床图片"
              >
                <div class="imgBox">
                  <div class="imgItem" v-for="item in pictureList" :key="item.name">
                    <imageUpload
                      v-if="show"
                      :imagUrl="item.img ? imgUrl + item.img : ''"
                      v-model="item.fileObj"
                      :type="2"
                      :width="'50px'"
                    />
                    <img
                      @click="openimg(item.img)"
                      v-else
                      :src="imgUrl + item.img"
                      :onerror="onerrorpicture"
                      alt=""
                      class="picture"
                    />
                    <div class="colorin">
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item
            :labelCol="{
              xl: { span: 4 },
              xxl: { span: 4 },
            }"
            :wrapperCol="{
              xl: { span: 20 },
              xxl: { span: 20 },
            }"
            label="导轨类型"
          >
            <template v-if="!show">
              <div>
                <div v-for="(item, index) in model.toolGuide" :key="index + 'c'" style="display: block" href="">
                  <span class="colorin" style="display: inline-block; margin:0 20px" >
                    {{ item.guideAxis || '' }}
                  </span>
                  <span class="colorin" style="display: inline-block" >{{ item.guideType || '' }}</span>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="guideAdd" @click="handleAdd">
                <a-icon type="plus" style="color: #0eaee0" />
                <span class="colorin">添加导轨</span>
              </div>
              <div class="guideBox flex flex-a-c" v-for="(item, index) in model.toolGuide" :key="index + 'v'">
                <a-input placeholder="请输入设备编号" v-model="item.guideAxis" />
                <a-radio-group class="flex flex-a-c" v-model="item.guideType" style="margin-left: 10px">
                  <div
                    class="guideRadio"
                    v-for="element in guideRadio"
                    :key="element"
                    :class="[item.guideType === element ? 'guideCheck' : '']"
                  >
                    <a-radio :value="element" class="colorin">{{ element }}</a-radio>
                  </div>
                </a-radio-group>
                <a-icon type="close-circle" @click="handleDelete(index)" />
              </div>
              <br />
            </template>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-modal :visible="previewVisibleopen" :footer="null" @cancel="previewVisibleopen = false">
      <img alt="example" style="width: 100%" :src="previewimg" />
    </a-modal>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
import { netTypeArray, equipmentTypeList, equipmentType, toolData } from './config';
import imageUpload from '@components/upload/imageupload.vue';
export default {
  name: 'MachineTool',
  data() {
    return {
      netTypeArray,
      equipmentTypeList,
      equipmentType,
      pictureList:[
      { name: '正面', value: 'positive' },
      { name: '侧面', value: 'side' },
      { name: '刀库', value: 'knife' },
      { name: '电柜', value: 'electric' },
      { name: '导轨', value: 'guide' },
    ], // 机床图片
      toolData,
      macName: [],
      guideRadio: ['线轨', '硬轨'],
      macNameIndex: 0,
      onerrorpicture: 'this.src="' + require('@images/imgdefult.png') + '"',
      previewVisibleopen: false,
      previewimg: '',
      model: {},
      // show: false,
      show: false,
      labelCol: {
        xl: { span: 6 },
        xxl: { span: 6 },
      },
      wrapperCol: {
        xl: { span: 18 },
        xxl: { span: 18 },
      },
    };
  },
  components: { imageUpload },
  computed: {
    macSN() {
      return this.$route.query.macsn;
    },
    imgUrl() {
      return this.$pictureUrl;
    },
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'));
    },
  },
  mounted() {
    this.getSelArchiveAndGuide();
  },
  methods: {
    // 导轨新增
    handleAdd() {
      this.model.toolGuide.push({ guideAxis: '', guideType: '线轨' });
    },
    // 导轨删除
    handleDelete(index) {
      this.model.toolGuide.splice(index, 1);
    },
    openimg(img) {
      if (img) {
        this.previewimg = this.imgUrl + img;
        this.previewVisibleopen = true;
      }
    },
    // 机床信息编辑
    handleEdit() {
      if (this.show) {
        this.updateArchiveAndGuide();
        this.$emit('setAlarm')
      } else {
        this.show = true;
        this.$forceUpdate();
      }
    },
    async updateArchiveAndGuide() {
      let picture = {};
      this.pictureList.forEach((item) => {
        if (item.fileObj && item.fileObj.length > 0) {
          picture[item.value] = item.fileObj[0].id + '';
        }
      });
      if (!this.model.macType || this.model.macType === '') {
        this.$message.error('请输入设备型号');
        return;
      }
      if (!this.model.toolChargeType || this.model.toolChargeType === '') {
        this.$message.error('请选择刀库类型');
        return;
      }
      if (!this.macName || this.macName.length < 2) {
        this.$message.error('请选择设备类型');
        return;
      }
      let flag = true;
      let toolGuide = [];
      if (!this.model.toolGuide || this.model.toolGuide.length <= 0) {
        this.$message.error('请添加导轨类型');
        return;
      } else {
        this.model.toolGuide.forEach((item) => {
          let data = {
            axis: '',
            type: '',
          };
          if (!item.guideAxis || item.guideAxis == '') {
            this.$message.error('请输入导轨类型信息');
            flag = false;
            return;
          } else {
            data.axis = item.guideAxis;
            data.type = item.guideType;
            toolGuide.push(data);
          }
        });
      }
      if (!flag) {
        return;
      }

      let params = {
        macSn: this.model.macSN,
        macType: this.model.macType,
        iccid: this.model.iccid,
        cid: this.model.cid,
        macNumb: this.model.macNumb,
        toolChargeType: this.model.toolChargeType,
        macName: this.macName[0] + '&' + this.macName[1],
        guideInfo: JSON.stringify(toolGuide),
        pictureId: JSON.stringify(picture),
        netWorkingMode: this.model.netWorkingMode,
        macNorm: this.model.macNorm,
        macImei: this.model.macImei,
        location: this.model.location,
      };
      const res = await api.updateArchiveAndGuide(params);
      if (res.MsgCode === 0) {
        this.$message.info(res.MsgDesc);
        await this.getSelArchiveAndGuide();
        this.show = false;
      } else {
        this.$message.error(res.MsgDesc);
      }
    },
    // 机床信息
    async getSelArchiveAndGuide() {
      const { Data: res } = await api.selArchiveAndGuide({ macSn: this.macSN });
       if (res !== '') {
        this.model = res;
      }

      this.pictureList.forEach((element) => {
        let item = res.picture.find((item) => item.description === element.value);
        console.log(item);
        if (item) {
          element.img = item.pictureUrl;
          element.id = item.id;
          element.fileObj = [{ id: '' }];
          element.fileObj[0].id = item.id;
        } else {
          element.img = '';
        }

        if (this.model.macName) {
          this.macName = this.model.macName.split('&');
          this.macNameIndex = this.equipmentTypeList.findIndex((li) => li === this.macName[0]);
        }
      });
    },
    //设备类型
    handleChangeMacNameOne(item) {
      this.macNameIndex = this.equipmentTypeList.findIndex((li) => li === item);
      this.macName.splice(0, 1, this.equipmentTypeList[this.macNameIndex]);
      this.macName.splice(1, 1, this.equipmentType[this.macNameIndex][0]);
      this.$forceUpdate();
    },
    handleChangeMacNameTwo(item) {
      this.macName.splice(1, 1, item);
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="less">
.machine {
  font-family: Microsoft YaHei;
  .machine-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-right: 20px;
  }
  .ant-input[disabled] {
    background: rgba(0, 0, 0, 0.25) !important;
  }
  .imgBox {
    overflow: hidden;
    margin-top: 10px;
    .imgItem {
      width: 100px;
      float: left;
      margin-right: 20px;
    }
    .picture {
      width: 80px;
      height: 80px;
    }
    div {
      text-align: center;
      width: 100%;
    }
  }
  .guideAdd {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2399f1;
    background: rgba(35, 153, 241, 0.2);
    border-radius: 4px;
    color: rgba(35, 153, 241, 1);
    margin: 5px 5px 32px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-left: 5px;
    }
  }
  .guideBox {
    margin: 20px 0;
  }
  .guideRadio {
    width: 78px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #e5e8ee;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    margin: 0 10px;
  }
  .guideCheck {
    border: 1px solid #2399f1;
  }
}
</style>
